<template>
  <div class="claimtable">
    <el-table
      border
      style="border-radius:5px;width:100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      :data="tableData"
      row-key="userId"
      lazy
    >
      <el-table-column type="index" :index="row"> </el-table-column>
      <el-table-column label="订单号" width="100">
        <template #default="scope">
          <i class="el-icon-s-order"></i>
          <span style="margin-left: 10px">{{ scope.row.orderId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出发地->目的地" width="150">
        <template #default="scope">
          <span style="margin-left: 10px"
            >{{ scope.row.depart }}->{{ scope.row.destination }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="出行日期" width="100">
        <template #default="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单金额" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.cost }}</span>
        </template>
      </el-table-column>
      <el-table-column label="航班号" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.flightId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="mini" @click="handleEdit()">申请</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } from 'vue';
import { Order } from '@/utils/api/order';
export default defineComponent({
  name: 'Ordertable',
  setup() {
    const tableData = ref([]);
    const getorder = () => {
      Order.getorder()
        .then((res) => {
          if (res.data.status === '200') {
            tableData.value = res.data;
            console.log(tableData);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    };

    const { ctx } = getCurrentInstance();
    const handleEdit = () => {
      ctx.$confirm('申请成功，申请状态将在记录中显示', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      });
    };
    return {
      tableData,
      getorder,
      handleEdit,
    };
  },
  mounted: function() {
    this.getorder();
  },
});
</script>

<style>
.el-table__header tr,
.el-table__header th {
  height: 25px;
  line-height: 25px;
}
</style>
